<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
        <style>
			*{margin:0;padding:0; list-style: none;}
			body{
                background:url(images/bg.ipg);
                background-size:100%auto;
            }
            .auto{
                overflow:hidden;
			}
			.silderbox{
                width: 800px; 
                height:400px;
                position: absolute; 
                top:50%; 
                margin-top:-200px; 
                margin-left:-400px;
                border-radius: 10px;
            }
			.sildetbox ul{ 
                position: relative;
            }
			.silderbox ul li{ 
                width: 800px; 
                height:400px; 
                overflow: hidden; 
                display: none; 
                position: absolute;  
                top:0; 
                left:0;
            }
            #img1{
                display: block; 
            }
			.silderbox ul li img{ 
                width: 800px; 
                height: auto;
            }
			.silderboxul li {
                position:absolute;
                bottom: 10px; 
                left:0; 
                background: rgba(0,0,0,.5); 
                color: #fff; 
                line-height:40px; 
                width:100%; 
                text-align:center;}
			#time{
                display: block; 
                width: 20px; 
                height:20px; 
                background: #fff; 
                text-align: center; 
                line-height:20px; 
                font-size:14px; 
                color:#dd00ff; 
                position: absolute; 
                right:20px; 
                top:20px; 
                border-radius: 20px;}
                #timeline{
                    width:0%; 
                    height: 10px; 
                    border-radius: 10px; 
                    background: #1499f8; 
                    position: absolute; 
                    left:0; 
                    bottom:0;
                }
                @keyframes myfirst {
                    from {width:0%;} 
                    to{width:100%;}
                }
                @-webkit-keyfames myfist{ 
                    from {width:0%;} 
                    to {width: 100%;}
                }
                .ani-time-line{
                    animation: myfirst 5s linear; 
                    -webkit-animation: myfirst 5s linear;
                }
		</style>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	</head>
	<body>
		<div class="silderbox auto">
			<ul id="imglist"></ul>
			<span id="time">5</span> <span id="timeline"></span>
		</div>
		<script src="images.js"></script>
		<script>
            for( var i=0;i<data.length;i++){
                $('#imglist').append(`<li id=img${i+1}><img src="${data[i]['img']} alt=''"><p>${data[i]['desc']}</p></li>`)
            }
            var n=1
            var initTime=5
            var time=5
            function changImg(x){
                for(var i=1;i<5;i++){
                    if(x==i){
                        $('#img'+i).fadeIn()
                    }else{
                        $('#img'+i).fadeOut()
                    }
                }
                $('#timeline').removeClass('ani-time-line')
                setTimeout(function(){
                    $('#timeline').addClass('ani-time-line')
                },10)
            }
            $('#timeline').addClass('ani-time-line')
            setInterval(function(){
                time--
                if(time==-1){
                    time=initTime
                    n++
                    if(n==5){
                        n=1 
                    }
                    changImg(n)
                }
                $('#time').html(time)
            },1000)
        </script>
	</body>
</html>
